<!-- src/components/SvgIcon/index.vue -->
<template>
  <svg class="svg-icon" :class="className" :style="computedStyle" aria-hidden="true" v-bind="$attrs">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: {
    type: [Number, String],
    default: 16
  },
  color: {
    type: String,
    default: undefined
  },
  className: {
    type: String,
    default: ''
  },
  spin: {
    type: Boolean,
    default: false
  }
})

const symbolId = computed(() => `#icon-${props.name}`)

const computedStyle = computed(() => {
  const style = {}

  if (props.size) {
    const size = typeof props.size === 'number' ? `${props.size}px` : props.size
    style.width = size
    style.height = size
  }

  if (props.color) {
    style.color = props.color
  }

  return style
})
</script>

<style scoped>
.svg-icon {
  display: inline-block;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  outline: none;
  user-select: none;
}

.svg-icon.spin {
  animation: icon-spin 1s infinite linear;
}

@keyframes icon-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>